<template>
	<div class="dh_jmhy_sync">
		
		<div class="d_j_s-ancestor">
			
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
					
				<el-form-item label="查询信息">
					<el-input v-model="formInline.user" placeholder="请输入详细信息"></el-input>
				</el-form-item>
				
				<el-form-item label="查询项">
					<el-select v-model="formInline.region" placeholder="全部数据">
						<el-option v-for="(item,key) in optionlabel" :key="key" :label="item" :value="key"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
				</el-form-item>
				
			</el-form>

			<div class="d_j_s-an-flex">

				<!-- 列表的类名 -->
				<div class="d_j_sync-list">
					<div class="d_j_s-list-title">
						<div>会员号</div>
						<div>会员名称</div>
						<div>手机号</div>
						<div>申请次数</div>
						<div>操作</div>
					</div>
					<!-- 列表数据 -->
					<div class="d_j_s-list-details" v-for="(item,key) in listdetails" :key="key">
						<div>{{item.user_id}}</div>
						<div>{{item.real_name}}</div>
						<div>{{item.phone}}</div>
						<div>{{map[item.user_id]}}</div>
						<a @click="coupondata(item.user_id)">查看申请详情</a>
					</div>
				</div>
				<!-- 分页 -->
				<div class="d_j_sync-block">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page.sync="currentPage"
						:page-size="100"
						layout="prev, pager, next, jumper"
						:total="1000">
					</el-pagination>
				</div>

			</div>
			
		</div>
		
		<div></div>
		
	</div>
</template>

<script>
	import {date} from '../js/time.js';  			 //用于时间戳转换时间
	import {timetamp} from '../js/timestamp.js'		 //用户日期转时间戳
	export default{
		data(){
			return{
				listdetails:[],						//接口的数据渲染
				currentPage: 1,						//分页的默认页数
				login:'',							//缓存中的保存的账号密码
				map:{},
				formInline: {
					user: '',
					region: ''
				},
				optionlabel:['会员号','姓名','手机号',]
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			//分页自带的两个函数
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			//正则表达式判断日期格式是非为可读时间,统一日期格式，暂时用不上
			isDate(str){
			   var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); 
			   if(r==null)return false; 
			   var d= new Date(r[1], r[3]-1, r[4]); 
			   return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
			},
			//商家同意或拒绝用户请求的方法
			userselection(e,id,state,user_id,money,time,key){
				// console.log(e,id,state,user_id,money,time)
				let that= this
				const axios = require('axios')				
				that.login = JSON.parse(sessionStorage.getItem("dh_jmhylogin"))
				//入驻时间
				let begin = timetamp(time)
				//当前时间
				var y = new Date().getFullYear(); 	//得到年份	
				var m = new Date().getMonth()+1;	//得到月份				
				var d = new Date().getDate();		//得到日期
				m < 10 ? m = "0" + m : m;
				d < 10 ? d = "0" + d : d
				let end = y+"/"+m+"/"+d
				let end_time = timetamp(end)
				//上传的更新的数据
				let data = {
					name: that.login.uname,
					password: that.login.pwd,
					state: e,
					user_id: user_id,
					money: money,
					id: id,
					begin_time: begin,
					end_time: end_time
				}
				let updata = JSON.stringify(data)

				//列表数据，在生命周期函数中写，也可以写在方法例面，在生命周期函数中调用
				axios({
					method: 'post',
					url: '/api/api/dh_jm/apply_operation.php',
					header: { "Content-Type": "application/JSON" },
					data: updata
				})
				.then( resp=> {
					// console.log(resp,key)
					// if(e===1){
					// 	that.listdetails[key].state = "已同意"
					// }else{
					// 	that.listdetails[key].state = "已拒绝"
					// }
				})
				.catch( err=> {
					console.log(err)
				})
			},
			coupondata(key){
				this.$router.push({
					name: 'sydet',
					query: {user_id:key} 
				})
			}
		},
		mounted(){
			let that= this
			const axios = require('axios')
			that.login = JSON.parse(sessionStorage.getItem("dh_jmhylogin"))
			let data = {name: that.login.uname,password: that.login.pwd}
			let updata = JSON.stringify(data)
			//列表数据，在生命周期函数中写，也可以写在方法例面，在生命周期函数中调用
			axios({
				method: 'post',
				url: '/api/api/dh_jm/business_apply.php',
				header: { "Content-Type": "application/JSON" },
				data: updata
			})
			.then( resp=> {
				// console.log("接口获取的数据",resp.data.data)
				// that.listdetails = resp.data.data
				let data = resp.data.data
				//检测时间中是否有需要转化的数据
				var map = that.map;
				var i = 0, len = data .length;
				for (; i < len; i++) {				 	//循环查找
				    var v = data [i].user_id;			//数组里的i个元素				    
				    var counts = map[v];				//将数组的i个元素作为map对象的属性查看其属性值				    
				    if (counts) {map[v] += 1;}			//如果map对象没有该属性，则设置该属性的值为1，有的话在其基础上再+1
				    else {map[v] = 1;}
				}
				// console.log(map)
				let arr = data
				var result = that.listdetails;
			    var obj = {};
			    for(var e =0; e<arr.length; e++){
			        if(!obj[arr[e].user_id]){
			            result.push(arr[e]);
			        	obj[arr[e].user_id] = true;
			    	}
				}
				// console.log(result)
			})
			.catch( err=> {
				console.log(err)
			})
		}
	}
</script>

<style>
	/* 默认样式清除 */
	button{
		outline: none;
		color: white;
		background-color: transparent;
		border: 0;
	}
	a:hover{
		color: aquamarine;
	}
	/* 子路由的最外层盒子 */
	.dh_jmhy_sync{
		width: 100%;
		/* min-height: 866px; */
		/* margin: auto; */
		padding: 20px;
		box-sizing: border-box;
	}
	.d_j_s-ancestor{
		height: 100%;
	}
	.d_j_s-an-flex{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100% - 62px);
		box-sizing: border-box;
	}
	/* 列表的类名样式 */
	.d_j_sync-list{
		/* align-self: flex-start; */
		font-size: 14px;
		background-color: white;
		border: 1px solid #cecece;
		border-radius: 5px;
	}
	/* 列表每一项的标题 */
	.d_j_s-list-title{
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		/* grid-auto-rows: 50px;
		/* grid-template-columns: 13% 13% 15% 15% 12% 20% 12%; */
		padding: 15px 0;
		background-color: #dddddd;
	}
	/* 列表数据样式 */
	.d_j_s-list-details{
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		/* grid-auto-rows: 50px; */
		/* grid-template-columns: 13% 13% 15% 15% 12% 20% 12%; */
		padding: 15px 0;
	}
	.d_j_s-list-details>div{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.d_j_s-list-details>a{
		cursor:pointer
	}
	.d_j_s-list-details:nth-child(odd){
		background-color: #e1e1e1;
	}
	/* 列表的每项的垂直居中 */
	/* .d_j_s-list-title>*::before,.d_j_s-list-details>*::before{
		display: inline-block;
		content: "";
		height: 100%;
		vertical-align: middle;
	} */
	/* 列表的操作，同意或拒绝按钮的样式和布局 */
	.d_j_s-l-det-result{
		display: flex;
		justify-content: center;
		align-items: center;
		color: #409eff;
	}
	/* 单项去除伪类属性的居中效果 */
	.d_j_s-l-det-result::befor{
		display: none;
		height: 0;
	}
	.djs-ld-res-btn{
		white-space: nowrap;
		width: 80px;
		height: 30px;
	}
	.djs-ld-res-btn>button:nth-child(1){
		display: inline-block;
		width: 50%;
		height: 100%;
		background-color: #409eff;
	}
	.djs-ld-res-btn>button:nth-child(2){
		display: inline-block;
		width: 50%;
		height: 100%;
		background-color: #f56c6c;
	}
	
	
	/* 分页 */
	.d_j_sync-block{
		/* transform: translate(0,100%); */
		margin: 10px 0;
	}
</style>
